<template>
	<view class="home">
		<!-- 项目标题+图标 -->
		<view class="bg">
			<view class="qrcode_msg">
				<uni-icons type="scan" size="25" style="margin-left: 10px;line-height: 40px;"></uni-icons>
				<uni-icons type="mail-open" size="25"
					style="float: right;margin-right: 10px;line-height: 40px;"></uni-icons>
			</view>
			<view class="program">智慧运维管理APP</view>
			<img src="https://img.axureshop.com/25/b4/10/25b4104f10ee4caebb973eb8225c8a01/images/%E9%A6%96%E9%A1%B5/u189.svg"
				alt="" class="logo">
		</view>
		<!-- 三大模块 -->
		<view class="blocks">
			<view class="block1">
				<view class="block1bg">
					<uni-icons type="bars" class="icon" color="#fff" size="28"></uni-icons>
				</view>
				<view class="block1text">
					工单
				</view>
			</view>
			<view class="block2">
				<view class="block2bg">
					<uni-icons type="tune-filled" class="icon" color="#fff" size="28"></uni-icons>
				</view>
				<view class="block2text">
					巡检
				</view>
			</view>
			<view class="block3">
				<view class="block3bg">
					<uni-icons type="calendar" class="icon" color="#fff" size="28"></uni-icons>
				</view>
				<view class="block3text">
					维修
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view class="space"></view>
		<!-- 工作进度 -->
		<view class="workprogress">
			<view class="workprogressTitle">工单进度</view>
			<view class="chart1">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" style="height: 100%;"/>
			</view>
		</view>
		<!-- 工单列表 -->
		<view class="worklist">
			<view class="WorkOrderStatus_content_con">
				<view class="_title">
					<view class="_title_left">
						<uni-icons type="settings"></uni-icons>
						<text>A栋空调坏了</text>
					</view>
					<view class="_title_right" @click="goto(item._id)">
						<text>待处理</text>
					</view>
				</view>
				<view>设备位置：A栋3楼101房间</view>
				<view>报单时间：2019-12-23 12：00：00</view>
				<view>报修人：张三</view>
			</view>
			<view class="WorkOrderStatus_content_con">
				<view class="_title">
					<view class="_title_left">
						<uni-icons type="settings"></uni-icons>
						<text>A栋空调坏了</text>
					</view>
					<view class="_title_right" @click="goto(item._id)">
						<text>待处理</text>
					</view>
				</view>
				<view>设备位置：A栋3楼101房间</view>
				<view>报单时间：2019-12-23 12：00：00</view>
				<view>报修人：张三</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {
					series: [{
						data: [{
								"name": "待处理",
								"value": 50,
								"labelShow": false
							},
							{
								"name": "处理中",
								"value": 30,
								"labelShow": false
							},
							{
								"name": "待评价",
								"value": 20,
								"labelShow": false
							},
							{
								"name": "已处理",
								"value": 18,
								"labelShow":false
							}
						]
					}]
				},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5,120,5,15],
					enableScroll: false,
					dataLabel: false,
					extra: {
						pie: {
							activeOpacity: 0,
							activeRadius: 0,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 0,
							borderColor: "#FFFFFF"
						}
					},
					legend:{
						position:'right',
						lineHeight:30,
						float:'left',
						show:true
					}
				},
				datas: []
			}
		},
		onLoad() {
			this.handlerData()
		},
		methods: {
			handlerData(num = 2){
				console.log(num);
				request({
					url: "http://42.192.15.126:3000/yan/data?id=" + num,
					method: 'GET'
				}).then(item => {
					datas.value = item.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.home {
		height: calc(100vh - 50px);
	}

	/* 渐变色背景 */
	.bg {
		height: 220px;
		width: 100%;
		position: absolute;
		top: 0;
		border-bottom-left-radius: 80%;
		border-bottom-right-radius: 80%;
		-webkit-animation: color-change-2x 10s linear infinite alternate both;
		animation: color-change-2x 10s linear infinite alternate both;
	}

	@-webkit-keyframes color-change-2x {
		0% {
			background: rgba(134, 214, 244, 1);
		}

		50% {
			background: rgba(128, 153, 244, 0.5);
		}

		100% {
			background: rgba(222, 144, 142, 0.5);
		}
	}

	@keyframes color-change-2x {
		0% {
			background: rgb(134, 214, 244);
		}

		50% {
			background: rgb(128, 153, 244);
		}

		100% {
			background: rgb(222, 144, 142);
		}
	}

	/* 项目名称+logo */
	.logo,
	.program {
		display: inline-block;
		vertical-align: middle;
	}

	.logo {
		width: 124px;
		height: 124px;
		padding-top: 3vh;
	}

	.program {
		width: 170px;
		font-size: 18px;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 400;
		text-align: left;
		padding: 1px 0;
		margin-left: 6vh;
		padding-top: 3vh;
		color: white;
	}

	/* 三大模块 */
	.blocks {
		width: 345px;
		height: 110px;
		background-color: white;
		position: absolute;
		top: 18%;
		left: 5%;
		border-radius: 5px;
		z-index: 3;
		display: flex;
		align-items: center;
		box-shadow: 2px 2px 2px #ddd;
	}

	.block1,
	.block2,
	.block3 {
		margin: 0 20px;
		display: inline-block;
		text-align: center;
	}

	.block1 {
		margin-left: 35px;
	}

	.block1bg,
	.block2bg,
	.block3bg {
		width: 61px;
		height: 61px;
		margin-bottom: 5px;
	}

	.block1bg {
		background-image: url('../../static/home_bg1.png');
	}

	.block2bg {
		background-image: url('../../static/home_bg2.png');
	}

	.block3bg {
		background-image: url('../../static/home_bg3.png');
	}

	.icon {
		line-height: 61px;
	}

	.block1text,
	.block2text,
	.block3text {
		font-size: 13px;
	}

	.qrcode_msg {
		position: absolute;
		width: 100%;
		z-index: 5;
		top: 0;
	}

	/* 占位元素 */
	.space {
		height: 275px;
	}
	/* 工单列表 */
	.workprogress{
		height: 220px;
	}
	.workprogressTitle{
		font-size: 18px;
		font-weight: 400;
		padding-left: 20px;
		color: #333;
		line-height: 29px;
		margin-bottom: 5px;
	}
	.chart1{
		height: calc(100% - 29px - 10px);
	}
	// 工单列表
	.worklist{
		height: 300px;
		overflow: scroll;
	}
	.WorkOrderStatus_content_con:first-child {
		margin-top: 0;
	}
	
	.WorkOrderStatus_content_con {
		background-color: white;
		height: 320rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #b3b4d2;
		border-top: 1px solid #ddd;
	
	
	
		._title {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
	
			._title_left {
				display: flex;
				align-items: flex-end;
	
				text:first-child {
					width: 28px;
					height: 30px;
					font-size: 30px !important;
					margin-right: 10rpx;
					background-color: #007afe;
					color: white !important;
					border-radius: 5rpx;
					box-shadow: 5px 5px 5px #eaeaeb;
				}
			}
	
			._title_right {
				font-size: 14px;
	
				text:last-child {
					font-size: 14px !important;
					color: #FF0000 !important;
				}
			}
		}
	}
				
</style>